<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="BigBox">
		<!-- <view class="status_bar"></view> -->
		<view class="cneterBox" :style="{ marginTop: topBar }">
			<!-- scan -->
			<view class="LeftBtnBox" @tap="saoMa" v-if="isLoginShow">
				<uni-badge :text="$store.state.pushBadgeNum" type="error" absolute="rightTop" :offset="[5, 5]" size="small">
					<uni-icons type="notification" color="#fff" size="28"></uni-icons>
				</uni-badge>
			</view>
			<view class="rightBtnBox" @tap="showSetUp"><uni-icons type="bars" color="#fff" size="28"></uni-icons></view>
			<view class="imgBoxBig">
				<image class="imgBoxBigImg" mode="scaleToFill" src="/static/icon/AboutUs/2x/homeImg.png"></image>
				<view class="logoBox">
					<view class="logoBoxImg">
						<uni-transition style="width: 200px; height: 200px;" :duration="500" :mode-class="['slide-top']" :show="transitionModelShow">
							<image style="width: 100%; height: 100%; border-radius: 50%;" mode="aspectFill" src="/static/icon/pagesLogo.png"></image>
						</uni-transition>
					</view>
					<view class="welcomeUserNum">
						<uni-transition :duration="500" :mode-class="['slide-bottom']" :show="transitionModelShow">
							<view class="welcomeUserNumItem" v-if="isLoginShow">
								WELCOME
								<text style="font-weight: 700; padding-left: 5px;">{{ userList }}</text>
							</view>
						</uni-transition>
					</view>
				</view>
				<uni-transition :duration="500" :mode-class="['slide-right']" :show="transitionModelShow">
					<view class="searchBigBox">
						<view class="searchBigBoxTitle">{{i18n.ctwfont30}}：</view>
						<view class="searchBox">
							<view class="searchBoxItem">
								<view class="classInputBig ">
									<uni-easyinput
										type="text"
										:clearable="false"
										class="classInput"
										confirmType="search"
										@confirm="searchTopBtn"
										:inputBorder="false"
										v-model="search"
										:placeholder="i18n.ctwfont5"
									></uni-easyinput>
									<view class="searchBtn" @tap="searchTopBtn">{{ i18n.ctwfont6 }}</view>
								</view>
							</view>
						</view>
						<view class="searchBigBoxBottom">
							<button
								:class="isLoginShow ? 'searchBigBoxBottomBtnTwo' : 'searchBigBoxBottomBtn'"
								:disabled="isLoginShow"
								size="mini"
								type="default"
								@tap="removeMask(1)"
							>
								{{ i18n.ctwfont29 }}
							</button>
						</view>
					</view>
				</uni-transition>
			</view>
		</view>

		<view class="bottomImgBox" :style="{ bottom: isIosBottom }">
			<uni-transition style="width: 100%; height: 100%;" :duration="500" :mode-class="['slide-bottom']" :show="transitionModelShow">
				<image style="width: 100%; height: 100%;" src="/static/icon/AboutUs/2x/Container.png" mode=""></image>
			</uni-transition>
		</view>
		<!-- 遮罩组件 -->
		<view @tap="removeMask(1)"><cpt-mask v-if="mask"></cpt-mask></view>
		<!-- 登录 -->
		<login-pages v-if="loginMaskBox" :MaskBox="loginMaskBox" @removeLoginMaskBox="removeLoginMaskBox" @loginSubmit="loginSubmit"></login-pages>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" @showLoginBoxT="showLoginBoxT" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" @closeSignOut="closeSignOut" />
		<!-- 广告一-->
		<pop-up-one v-if="loginChonzhi"></pop-up-one>
		<!-- 广告二-->
		<pop-up-two></pop-up-two>
		<!-- 广告三 -->
		<pop-up-three></pop-up-three>
		<lb-tabbar ref="tabbar" :value="$store.state.tabActive" :animate="$store.state.animate" :placeholder="true">
			<lb-tabbar-item
				v-for="item in $store.state.tabbars"
				:key="item.pagePath"
				:name="item.pagePath"
				:icon="item.iconPath"
				:selectedIconPath="item.selectedIconPath"
				:dot="item.dot"
				:info="item.info"
				:raisede="item.raisede"
				icon-prefix="iconfont"
				@click="handleTabbarItemClick"
			>
				{{ item.text }}
			</lb-tabbar-item>
		</lb-tabbar>
	</view>
</template>
<style lang="scss" scoped>
::v-deep .uni-easyinput__content {
	min-height: 35px;
	background-color: #fff;
	border-radius: 20px;
}
::v-deep .uni-input-placeholder {
	line-height: 30px;
}
.BigBox {
	// 顶部部分
	// .status_bar {
	// 	height: var(--status-bar-height);
	// 	background-color: #CD001B;
	// 	width: 100%;
	// }
	.cneterBox {
		position: relative;
		top: 0;
		left: 0;
		.rightBtnBox {
			position: absolute;
			right: 15px;
			top: 40px;
			z-index: 10;
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
			// background-color: pink;
		}
		.LeftBtnBox {
			position: absolute;
			left: 15px;
			top: 40px;
			z-index: 10;
			width: 50px;
			height: 50px;
			display: flex;
			justify-content: center;
		}
		.imgBoxBig {
			position: relative;
			width: 100%;
			.imgBoxBigImg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			.logoBox {
				position: relative;
				height: 500px;
				.logoBoxImg {
					position: absolute;
					left: 50%;
					top: 25%;
					transform: translate(-50%, -50%);
				}
				.welcomeUserNum {
					position: absolute;
					left: 50%;
					top: 38%;
					transform: translate(-50%, -50%);
					.welcomeUserNumItem {
						letter-spacing: 2px;
						padding: 3px 20px;
						background-color: rgba(0, 0, 0, 0.15);
						text-align: center;
						font-size: $uni-font-size-custom-j;
						color: #fff;
						border-radius: 20px;
					}
				}
			}
			.searchBigBox {
				position: absolute;
				z-index: 10;
				bottom: -360rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 100%;
				padding: 0 10px;
				box-sizing: border-box;
				background-color: #fff;
				border-top-right-radius: 15px;
				border-top-left-radius: 15px;
				.searchBigBoxTitle {
					font-size: $uni-font-size-custom-g;
					font-weight: 700;
					color: #828196;
					padding: 15px 0;
				}
				.searchBigBoxBottom {
					display: flex;
					justify-content: center;
					margin: 15px 0 30px 0;
					.searchBigBoxBottomBtn {
						background-color: #0f2671;
						color: #fff;
						border-radius: 20px;
						font-size: $uni-font-size-custom-e;
					}
					.searchBigBoxBottomBtnTwo {
						background-color: #aeb0b3;
						color: #fff;
						border-radius: 20px;
						font-size: $uni-font-size-custom-e;
					}
				}
				.searchBox {
					height: 80px;
					background-color: #ffffff;
					border-radius: 5px;
					padding: 2px;
					box-shadow: 0 3px 5px 1px #ccc;
					.searchBoxItem {
						border-radius: 5px;
						height: 100%;
						background-color: #e7e7e7;
						.classInputBig {
							position: relative;
							top: 50%;
							transform: translateY(-50%);
							.classInput {
								padding: 5px;
								box-sizing: border-box;
							}
							.searchBtn {
								position: absolute;
								top: 7px;
								right: 8px;
								width: 80px;
								height: 30px;
								line-height: 30px;
								border-radius: 20px;
								color: #fff;
								text-align: center;
								background-color: #cd001b;
								font-size: $uni-font-size-custom-e;
							}
						}
					}
				}
			}
		}
	}
	.bottomImgBox {
		position: fixed;
		bottom: 50px;
		width: 100%;
		height: 100px;
	}
}
</style>
<script>
// import saoma from '@/utils/soama.js';
import bottomPages from '@/pages/home/bottomPages.vue'; // 底部
import cptMask from '@/pages/home/cptMask.vue'; // 蒙版
import loginPages from '@/pages/logins/loginPages.vue'; // 登录
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage, setStorage } from '@/utils/setStorage.js';
import LanguageConfig from '@/i18n/LanguageConfig';
import { baseUrl } from '@/utils/http.js';
import baseFont from '@/utils/baseFont.js';
import popUpOne from '@/pages/advertisingPopUp/popUpOne.vue'; // 广告一
import popUpTwo from '@/pages/advertisingPopUp/popUpTwo.vue'; // 广告二
import popUpThree from '@/pages/advertisingPopUp/popUpThree.vue'; // 广告三
// tababr
import lbTabbar from '@/pages/lb-tabbar/lb-tabbar.vue';
import lbTabbarItem from '@/pages/lb-tabbar/lb-tabbar-item.vue';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			windowWidth: 0, // 手机宽
			windowHeight: 0, // 手机高
			search: '', // 搜索
			mask: false, // 蒙版Show
			loginMaskBox: false, // 登录模块
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			bannerinfo: [], // 轮播图
			LoginView: null, // tabBar遮罩层
			back_k: 0,
			isLoginShow: false, // 是否登录
			loginChonzhi: false,
			transitionModelShow: false, // 动画
			userList: ''
		};
	},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight;
			return num + 'px';
		},
		i18n() {
			return this.$t('homeBox');
		},
		isIosBottom() {
			if (uni.getSystemInfoSync().platform == 'android') {
				return '50px';
			} else {
				return '84px';
			}
		}
	},
	onShow() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 100
		});
		setTimeout(() => {
			this.$nextTick(function() {
				this.loginBox();
			});
		}, 100);
		this.showLoginBox();
		setTimeout(() => {
			if (!this.mask && !this.loginMaskBox) {
				this.loginChonzhi = false;
				setTimeout(() => {
					this.loginChonzhi = true;
				}, 300);
			}
			this.$store.dispatch('getPushBadgeNum')
		}, 400);
		this.transitionModelShow = true;
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
		// this.$ga();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
		this.transitionModelShow = false;
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.windowWidth = res.windowWidth;
				that.windowHeight = res.windowHeight;
				// that.topBarHeight = res.statusBarHeight;
			}
		});
		// 跳去清缓存
		// setTimeout(() => {
		// 	uni.redirectTo({
		// 		url: '/pages/me/versionInformation'
		// 	});
		// }, 1000);
	},
	beforeDestroy() {},
	components: {
		bottomPages,
		cptMask,
		loginPages,
		setUpPages,
		signOut,
		popUpOne,
		popUpTwo,
		popUpThree,
		lbTabbar,
		lbTabbarItem
	},
	methods: {
		handleTabbarItemClick(e) {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					if (e.name === '/pages/businessCard/index' || e.name === '/pages/home/index') {
						// #ifdef APP-PLUS
						uni.redirectTo({
							url: e.name
						});
						// #endif
						// #ifdef H5
						this.$Router.push(e.name);
						// #endif
					} else {
						this.removeMask(2);
					}
				}
			} else {
				let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
				let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
				let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
				// 拼接参数
				let param = '';
				for (let key in currentParam) {
					param += '?' + key + '=' + currentParam[key];
				}
				let localRoute = '/' + currentRoute + param;
				if (e.name == localRoute) {
					return false;
				} else {
					// #ifdef APP-PLUS
					uni.redirectTo({
						url: e.name
					});
					// #endif
					// #ifdef H5
					this.$Router.push(e.name);
					// #endif
				}
			}
		},
		// 调扫描
		saoMa() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/messageQueue/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/messageQueue/index');
			// #endif
			// saoma(res => {
			// 	// #ifdef APP-PLUS
			// 	uni.redirectTo({
			// 		url: `/pages/scanSignIn/index?result=${res.result}`
			// 	});
			// 	// #endif
			// 	// #ifdef H5
			// 	this.$Router.push(`/pages/scanSignIn/index?result=${res.result}`);
			// 	// #endif
			// });
		},
		// 掉地图
		goMap() {
			plus.android.requestPermissions(
				['android.permission.ACCESS_FINE_LOCATION'],
				function(e) {
					if (e.deniedAlways.length > 0) {
						//权限被永久拒绝
						// 弹出提示框解释为何需要权限，引导用户打开设置页面开启
						console.log('权限被永久拒绝' + e.deniedAlways.toString());
					}
					if (e.deniedPresent.length > 0) {
						//权限被临时拒绝
						// 弹出提示框解释为何需要权限，可再次调用plus.android.requestPermissions申请权限
						console.log('权限被临时拒绝' + e.deniedPresent.toString());
					}
					if (e.granted.length > 0) {
						setTimeout(() => {
							// #ifdef APP-PLUS
							uni.navigateTo({
								url: '/pages/index/goMaps/index'
							});
							// #endif
							// #ifdef H5
							this.$Router.push('/pages/index/goMaps/index');
							// #endif
						}, 600);
						//权限被允许
						console.log('权限被允许' + e.granted.toString());
					}
				},
				function(e) {
					uni.showToast({
						title: JSON.stringify(e),
						icon: 'none',
						position: 'top'
					});
					console.log('Request Permissions error:' + JSON.stringify(e));
				}
			);
		},
		// 隐藏蒙版
		removeMask(val) {
			if (val === 1) {
				this.mask = false;
				this.loginMaskBox = true;
			} else {
				this.mask = true;
				// this.LoginView.hide();
			}
		},
		// 登录模块
		removeLoginMaskBox(val) {
			if (val) {
				this.loginMaskBox = false;
				setStorage('showLoginBox', false);
				setStorage('loginShow', 1); // tabbar点击
			} else {
				this.loginMaskBox = true;
			}
			// val ? (this.loginMaskBox = false) : (this.loginMaskBox = true);
		},
		// 登录成功
		loginSubmit(val) {
			if (val) {
				this.loginMaskBox = false;
				setStorage('showLoginBox', false);
				setStorage('loginShow', 1); // tabbar点击
				const languageFlag = getStorage('language') || 'th';
				LanguageConfig.isExist('');
				this.$i18n.locale = '';
				setTimeout(() => {
					LanguageConfig.isExist(languageFlag);
					this.$i18n.locale = languageFlag;
				}, 100);
				this.isLoginShow = true;
				const user = JSON.parse(getStorage('userconter'));
				if (user) {
					this.userList = user.customerCode;
				}
			}
		},
		// 物理返回
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				if (this.mask) {
					this.mask = false;
				} else if (this.loginMaskBox) {
					this.loginMaskBox = false;
					setStorage('showLoginBox', false);
					setStorage('loginShow', 1); // tabbar点击
				} else if (this.popupIsShow) {
					this.$refs.SetUpPopup.close();
					this.popupIsShow = false;
				} else if (this.signOutShow) {
					this.$refs.signOutBox.close();
					this.signOutShow = false;
				} else {
					let main = plus.android.runtimeMainActivity();
					if (this.back_k > 0) {
						this.back_k = 0;
						return main.moveTaskToBack(false);
						// return plus.runtime.quit();
					} else {
						const pages = getCurrentPages();
						if (pages.length === 1) {
							this.back_k++;
							setTimeout(() => {
								this.back_k--;
							}, 1000);
							// uni.showToast({
							// 	title: '再按一次退出应用',
							// 	icon: 'none',
							// 	duration: 1000
							// });
						}
					}
				}
			}
		},
		// 登录弹框
		loginBox() {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				this.isLoginShow = false;
				this.$nextTick(function() {
					const isShow = getStorage('loginShow');
					if (isShow === 2) {
						if (this.mask === false && this.loginMaskBox === false) {
							this.removeMask(2);
						}
					}
				});
			} else {
				this.isLoginShow = true;
				const user = JSON.parse(getStorage('userconter'));
				if (user) {
					this.userList = user.customerCode;
				}
			}
		},
		// 关闭view
		closeView(val) {
			if (val) {
				// if (this.LoginView) {
				// 	this.LoginView.hide();
				// }
			}
		},
		// 搜索
		searchTopBtn() {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				// this.LoginViewOnClick()
				this.removeMask(2);
			} else {
				// #ifdef APP-PLUS
				uni.redirectTo({
					url: `/pages/maps/orderTracking?num=${this.search}&url=/pages/home/index`
				});
				// #endif
				// #ifdef H5
				this.$Router.push(`/pages/maps/orderTracking?num=${this.search}&url=/pages/home/index`);
				// #endif
				// if (this.LoginView) {
				// 	this.LoginView.hide();
				// }
			}
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		showLoginBox(val) {
			const ok = getStorage('showLoginBox');
			if (ok) {
				setTimeout(() => {
					this.removeLoginMaskBox(false);
				}, 300);
			}
		},
		showLoginBoxT(val) {
			if (val) {
				setTimeout(() => {
					this.removeLoginMaskBox(false);
				}, 300);
			}
		},
		closeSignOut(val) {
			if (val) {
				setTimeout(() => {
					this.loginBox();
				}, 100);
				const languageFlag = getStorage('language') || 'th';
				LanguageConfig.isExist('');
				this.$i18n.locale = '';
				setTimeout(() => {
					LanguageConfig.isExist(languageFlag);
					this.$i18n.locale = languageFlag;
				}, 100);
			}
		}
	}
};
</script>
